<template>
  <div v-loading="boxLoading" class="dialog-box" element-loading-background="rgba(0, 0, 0, 0.8)"
       element-loading-spinner="el-icon-loading" element-loading-text="正在加载...">
    <div class="box-content" style="width: 409px">
      <div class="content-header">
        <span>模型轻量化</span>
        <i class="el-icon-close" @click="closeModelDialog"></i>
      </div>
      <div class="content-body">
        <el-form class="form-center">
          <div class="form-item-box">
            <div class="item-title">
              输入设置
            </div>
            <el-form-item label="输入路径">
              <el-input v-model="lightweightConfig.tileDir" disabled placeholder="请选择倾斜摄影模型文件夹"
                        style="width:217px"></el-input>
              <el-button type="primary" @click="openFolderSelect('tileDir')">选择文件</el-button>
            </el-form-item>
          </div>
          <div class="form-item-box">
            <div class="item-title">
              轻量化参数
            </div>
            <el-form-item label="转换模式">
              <el-select v-model="lightweightConfig.mode" style="width:217px">
                <el-option v-for="(item, index) in modelOptions" :key="index" :value="item">
                </el-option>
              </el-select>
              <el-button type="primary" @click="advancedShow = true">高级选项</el-button>
            </el-form-item>
          </div>
          <div class="form-item-box">
            <div class="item-title">
              输出设置
            </div>
            <el-form-item label="存储类型">
              <el-select v-model="lightweightConfig.compactFormat" style="width:217px">
                <el-option :value="false" label="散列"></el-option>
                <el-option :value="true" label="紧凑"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="输出路径">
              <el-input v-model="lightweightConfig.compressDir" disabled placeholder="请选择输出文件夹"
                        style="width:217px"></el-input>
              <el-button type="primary" @click="openFolderSelect('compressDir')">选择路径</el-button>
            </el-form-item>
          </div>
          <div class="form-item-box" style="border:none">
            <el-form-item class="submit-btn">
              <el-button v-if="conversionLog.length > 0" class="grey-hover-primary-button"
                         @click="journalShow = !journalShow">
                日志
              </el-button>
              <el-button :loading="confirmLoading" type="primary" @click="clickConfirmBtn">转换</el-button>
              <el-button class="grey-hover-grey-button" @click="closeModelDialog">关闭</el-button>
            </el-form-item>
          </div>
          <!-- 模型转换日志 -->
          <transition enter-active-class="animate__animated animate__fadeInLeft animate__faster"
                      leave-active-class="animate__animated animate__fadeOutRight animate__faster">
            <div v-if="journalShow" class="journal-box form-item-box">
              <div class="conver-log">
                <div class="item-title">{{ convertTitle }}</div>
                <div ref="logBox" class="log-box">
                  <el-alert v-for="(item, index) in conversionLog" :key="index" :closable="false" :title="item.info"
                            :type="item.type"></el-alert>
                </div>
              </div>
            </div>
          </transition>
        </el-form>
      </div>
    </div>
    <advanced-set v-if="advancedShow" :config.sync="lightweightConfig" :maxThread="maxThread"
                  @close="advancedShow = false">
    </advanced-set>
  </div>
</template>

<script>
import advancedSet from './component/advancedSet.vue';

const os = window.require('os');
const {ipcRenderer} = window.require("electron");
export default {
  data() {
    return {
      journalShow: false,
      maxThread: 0,
      advancedShow: false,
      confirmLoading: false,
      boxLoading: false,
      storageType: '',
      convertTitle: "转换中",
      modelOptions: ['osgb_fast', 'osgb_normal', 'osgb_best'],
      lightweightConfig: {
        tileDir: "", // 输入路径
        compressDir: "", // 输出路径
        mode: "osgb_fast", // 模型压缩模式
        compactFormat: false, // 是否使用紧凑格式存储
        encrypt: false, // 是否加密
        threads: 0,
        compressOptions: {
          mesh_compression: "meshopt",
          mesh_compression_exactly: false,
          texture_compression_options: {
            use_compression: true,
            uastc: false,
            scale: 1,
            qlevel: 255,
            mipmap: false
          },
          max_level_texture_compression_options: {
            use_compression: false,
            uastc: false,
            scale: 1,
            qlevel: 255,
            mipmap: false
          }
        }
      },
      conversionLog: []
    };
  },
  components: {
    advancedSet
  },
  watch: {
    conversionLog(val) {
      this.$nextTick(() => {
        if (this.$refs.logBox) {
          this.$refs.logBox.scrollTo(0, this.$refs.logBox.scrollHeight);
        }
      });
    },
  },
  methods: {
    closeModelDialog() {
      this.$emit('close')
    },
    clickConfirmBtn() {
      this.conversionLog = [];
      this.journalShow = true
      this.convertTitle = "转换中";
      this.startCompress()
    },
    async startCompress() {
      this.confirmLoading = true;
      this.boxLoading = true;
      let option = {
        exeName: "3dtilesCompress",
        configName: "config",
        config: JSON.stringify(this.lightweightConfig),
      };
      ipcRenderer.send("spawn-exe", option);
      ipcRenderer.on("spawn-exe", this.ipcListenOn);
    },
    /**
     * 监听 IPC 消息
     *
     * @param event IPC 事件名
     * @param data 接收到的数据
     */
    ipcListenOn(_, data) {
      this.boxLoading = false;
      if (typeof data === "string") {
        ipcRenderer.off("spawn-exe", this.ipcListenOn);
        this.convertTitle = "日志";
        this.confirmLoading = false;
      } else {
        this.conversionLog.push(data);
      }
    },
    /**
     * 打开文件夹选择对话框，获取文件夹路径并赋值给lightweightConfig的指定字段
     *
     * @param field lightweightConfig中需要赋值的字段名
     */
    openFolderSelect(field) {
      const option = {
        title: `选择文件夹`,
        buttonLabel: "确定",
        properties: ["openDirectory"],
      };
      ipcRenderer.send("open-directory-dialog", option);
      ipcRenderer.once("open-directory-dialog", (event, data) => {
        this.lightweightConfig[field] = data.folderPath
      })
    }
  },
  created() {
  },
  mounted() {
    if (process.env.NODE_ENV === 'development') {
      this.maxThread = 4
    } else {
      this.maxThread = os.cpus().length;
    }
    this.lightweightConfig.threads = this.maxThread
  }
};
</script>
<style lang="less" scoped>
.journal-box {
  position: absolute;
  background: #444444;
  width: 100%;
  height: calc(100% - 100px);
  left: 0;
  top: 46px
}

.conver-log {
  color: #fff;
  box-sizing: border-box;
  padding: 0 10px;

  &::-webkit-scrollbar {
    width: 4px;
    height: 4px;
    background: transparent;
  }

  &::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 4px;
  }

  &::-webkit-scrollbar-track {
    background: transparent;
  }

  &:hover::-webkit-scrollbar-thumb {
    background: hsla(0, 0%, 90%, 0.4);
  }

  &:hover::-webkit-scrollbar-track {
    background: transparent;
  }

  .log-box {
    width: 100%;
    height: 300px;
    overflow: hidden;
    overflow-y: scroll;

    &::-webkit-scrollbar {
      width: 4px;
      height: 4px;
      background: transparent;
    }

    &::-webkit-scrollbar-thumb {
      background: transparent;
      border-radius: 4px;
    }

    &::-webkit-scrollbar-track {
      background: transparent;
    }

    &:hover::-webkit-scrollbar-thumb {
      background: hsla(0, 0%, 90%, 0.4);
    }

    &:hover::-webkit-scrollbar-track {
      background: transparent;
    }
  }
}
</style>